import React from 'react';
import { useNavigate } from 'react-router-dom';
import './storeDisplay.css';
import { stores } from '../../data/stores';
import { LocationOn, Star, Comment } from '@mui/icons-material';

export default function StoreDisplay() {
  const navigate = useNavigate();

  const handleStoreClick = (storeId) => {
    navigate(`/store/${storeId}`);
  };

  return (
    <div className="storeDisplay">
      <h2 className="storeDisplayTitle">Recommended Places</h2>
      <div className="storeGrid">
        {stores.map((store) => (
          <div 
            key={store.id} 
            className="storeCard" 
            onClick={() => handleStoreClick(store.id)}
          >
            <div className="storeImageContainer">
              <img src={store.image} alt={store.name} className="storeImage" />
            </div>
            <div className="storeInfo">
              <h3 className="storeName">{store.name}</h3>
              <p className="storeLocation">
                <LocationOn className="locationIcon" /> 
                {store.location} • {store.businessHours}
              </p>
              <div className="storeStats">
                <span className="comments">
                  <Comment className="commentIcon" /> {store.comments} Reviews
                </span>
                <span className="rating">
                  <Star className="starIcon" /> {store.rating}
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
} 